<template>
  <!-- 主体布局 -->
  <div class="main-wrap">
    <!-- 侧边导航 -->
    <div class="navbar">
      <ul>
        <router-link to='/discovery'>
          <li><span class="iconfont iconmusic"></span><span>发现音乐</span></li>
        </router-link>
        <router-link to="/recommend">
          <li><span class="iconfont icongedan"></span><span>推荐歌单</span></li>
        </router-link>
        <router-link to="/newmusic">
          <li><span class="iconfont iconyinle"></span><span>最新音乐</span></li>
        </router-link>
        <router-link to="/newmv">
          <li><span class="iconfont iconshipin"></span><span>最新MV</span></li>
        </router-link>
      </ul>
    </div>
    <!-- 主体容器 -->
    <div class="main">
      <router-view></router-view>
    </div>
    <!-- 底部播放器 -->
    <div class="player">
      <audio :src="$store.state.url" controls autoplay></audio>
    </div>
  </div>
</template>

<script>
// import request from '../request/index'
export default {
  data() {
    return {
      // MP3播放链接
      musicUrl: ''
    }
  }
}
</script>

<style lang="scss" scoped>
.main-wrap {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 60px 0;
  .main {
    flex: 1;
    padding: 10px 20px;
    // 滚动条
    overflow-y: scroll;
  }
}
.navbar {
  width: 200px;
  height: 100%;
  background-color: #ededed;
  ul {
    li {
      display: flex;
      align-items: center;
      height: 60px;
      padding-left: 30px;
      font-size: 18px;
      cursor: pointer;
      transition: background-color 0.2s;
      &:hover {
        background-color: #e7e7e7;
      }
    }
    .iconfont {
      margin-right: 15px;
      font-size: 22px;
    }
  }
}

.player {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: #f1f3f4;
  cursor: pointer;
  audio {
    width: 100%;
    outline: none;
  }
}
// 路由被激活时，vue自动添加这个类名
.router-link-active {
  color: #dd6d60;
  transition: all 0.5s;
}
</style>